<template>
    <div>
        <global-tables
                :total="total"
                :list="list"
                :loading="loading"
                :columns="columns"
                :current="search.Page"
                @changePage="handleChangePage"
                @handleAllSelect="handleAllSelect"
        >
            <Form :model="search" :label-width="80">
                <div class="table-top-wrap">
                    <div>
                    </div>
                    <div class="table-top-wrap-bottom">
                        <div>
                            <Select v-model="search.State" style="width:70px;margin:0 10px;" placeholder="状态">
                                <Option value="0">驳回</Option>
                                <Option value="1">审批中</Option>
                                <Option value="2">审结</Option>
                                <Option value="3">作废</Option>
                            </Select>
                        </div>
                        <div>
                            <input type="text" class="style-input" @keyup.enter="handleSearch" v-model="search.keyword"
                                   placeholder="请输入标题">
                            <i-input style="display:none"></i-input>
                        </div>
                        <div>
                            <Button icon="ios-search" @click="handleSearch" class="search-btn">搜索</Button>
                        </div>
                    </div>
                </div>
            </Form>
        </global-tables>
        <view-approval v-if="isViewApproval" :id="itemId" :isApproval="isViewApproval"
                       @handleCloseViewApproval="handleCloseViewApproval"></view-approval>
        <Approval
                @setApproval="setApproval"
                :directory="{directory:'OrgPath'}"
                :isApproval="isApproval"
                :groupid="groupId"
                :check="1"
                v-if="isApproval"
                :label="ApprovalLabel"
                :id="itemId"
                :ApprovalTitle="'修改审批'"
                :info="approvalInfo"
        ></Approval>
    </div>
</template>

<script>
    /**
     * 我的申请
     */
    import {cyclicRouting, getdate} from '@/util';
    import {getModulePermission} from '@/api/user';
    import {getTablesList, getItemInfo, deleteApproval} from './service';
    import GlobalTables from '@/components/GlobalTables';
    import ViewApproval from '@/components/ViewApproval';
    import Approval from '@/components/Approval';

    export default {
        name: 'FlowApply',
        components: {
            GlobalTables,
            ViewApproval,
            Approval
        },
        data() {
            return {
                list: [],
                cityList: [],
                isApproval: false,
                groupId: 0,
                itemId: 0,
                isView: false,
                allSelectArr: null,
                loading: true,
                isViewApproval: false,
                ApprovalLabel: '',
                approvalInfo: [],
                formItem: {},
                ruleValidate: {},
                total: 0,
                search: {
                    keyword: '',
                    pageindex: 1,
                    pagesize: 10
                },
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '申请标题',
                        key: 'Title'
                    },
                    {
                        title: '审批项目',
                        width: 130,
                        key: 'GroupName'
                    },
                    {
                        title: '当前审批人',
                        key: 'CurrentName'
                    },
                    {
                        title: '状态',
                        width: 130,
                        render: (h, params) => {
                            const {State} = params.row;
                            if (State == 0) {
                                return h('div', [
                                    h('Badge', {
                                        props: {
                                            status: 'warning',
                                            text: '驳回'
                                        }
                                    })
                                ]);
                            } else if (State == 1) {
                                return h('div', [
                                    h('Badge', {
                                        props: {
                                            status: 'processing',
                                            text: '审批中'
                                        }
                                    })
                                ]);
                            } else if (State == 2) {
                                return h('div', [
                                    h('Badge', {
                                        props: {
                                            status: 'success',
                                            text: '审结'
                                        }
                                    })
                                ]);
                            } else if (State == 3) {
                                return h('div', [
                                    h('Badge', {
                                        props: {
                                            status: 'error',
                                            text: '作废'
                                        }
                                    })
                                ]);
                            }
                        }
                    },
                    {
                        title: '创建时间',
                        width:'130',
                        render: (h, params) => {
                            return h('div', [
                                h(
                                    'span',
                                    {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        }
                                    },
                                    getdate(new Date(params.row.CreateTime).getTime())
                                )
                            ]);
                        }
                    },
                    {
                        title: '操作',
                        width:'150',
                        align: 'left',
                        render: (h, params) => {
                            const {isView} = this;
                            const {State} = params.row;
                            return h('div', [
                                isView &&
                                h(
                                    'Button',
                                    {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            background: '#5ab1ef',
                                            border: 'none',
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.handleBtnClick(params.row, 'view');
                                            }
                                        }
                                    },
                                    '查看'
                                ),
                                State == 1 &&
                                h(
                                    'Button',
                                    {
                                        props: {
                                            type: 'error',
                                            size: 'small'
                                        },
                                        style: {
                                            border: 'none',
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.handleBtnClick(params.row, 'delete');
                                            }
                                        }
                                    },
                                    '撤销申请'
                                ),
                                State == 0 &&
                                h(
                                    'Button',
                                    {
                                        props: {
                                            type: 'info',
                                            size: 'small'
                                        },
                                        style: {
                                            border: 'none',
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.handleBtnClick(params.row, 'edit');
                                            }
                                        }
                                    },
                                    '修改'
                                )
                            ]);
                        }
                    }
                ]
            };
        },
        methods: {
            /* 关闭对话框 */
            handleClose() {
                this.isModal = false;
            },
            /* 表格数据请求 */
            getTablesListData() {
                const data = this.search;
                getTablesList(data).then(res => {
                    this.list = res.rows;
                    this.loading = false;
                    this.total = res.records;
                });
            },
            /* 关闭审批 */
            setApproval() {
                this.isApproval = false;
                this.getTablesListData();
            },
            /* 表格查询 */
            handleSearch() {
                this.loading = true;
                this.getTablesListData();
            },
            /* 关闭查看 */
            handleCloseViewApproval() {
                this.isViewApproval = false;
            },
            /* 表格分页方法 */
            handleChangePage(type, page) {
                this.loading = true;
                if (type == 'page') {
                    this.search.pageindex = page;
                    this.getTablesListData();
                } else {
                    this.search.pagesize = page;
                    this.getTablesListData();
                }
            },
            /* 对话框 */
            handleBtnClick(item, type) {
                this.itemId = item.ID;
                if (type == 'edit') {
                    getItemInfo({
                        cfgid: item.GroupID,
                        cfid: item.ID
                    }).then(res => {
                        this.approvalInfo = res.data;
                        this.ApprovalLabel = '修改审批';
                        this.isApproval = true;
                        this.groupId = res.data.ComFlow.GroupID;
                    });
                } else if (type == 'view') {
                    this.isViewApproval = true;
                } else if (type == 'delete') {
                    this.$Modal.confirm({
                        title: `你确定要撤销审批吗 ?`,
                        onOk: () => {
                            deleteApproval({
                                fid: item.ID
                            }).then(res => {
                                if (res.state == 'success') {
                                    this.$Message.success(res.message);
                                    this.allSelectArr = '';
                                } else {
                                    this.$Message.error(res.message);
                                }
                                this.getTablesListData();
                            });
                        },
                        onCancel: () => {
                            this.$Message.info('取消成功');
                        }
                    });
                }
            },
            /* 表单数据 */
            initFormItem() {
                return {};
            },
            /* 复选框选中 */
            handleAllSelect(list) {
                let arr = [];
                for (let item in list) {
                    arr.push(list[item].ID);
                    arr.join(',');
                }
                arr = arr.join(',');
                this.allSelectArr = arr;
            }
        },
        mounted() {
            /* 获取菜单的id */
            cyclicRouting(JSON.parse(sessionStorage.getItem('user')).menuList, this.$route, id => {
                /* 按钮权限请求 */
                getModulePermission({
                    roleid: JSON.parse(sessionStorage.getItem('user')).roleid,
                    moduleid: id
                }).then(res => {
                    /* 按钮权限赋值 */
                    for (let item in res.data) {
                        if (res.data[item].name == 'view') {
                            this.isView = true;
                        }
                    }
                    /* 列表请求 */
                    this.getTablesListData();
                });
            });
        }
    };
</script>

<style>
</style>
